import React, { Component } from 'react';
import { Text, View, TouchableWithoutFeedback, DeviceEventEmitter, StyleSheet } from 'react-native';
import Echarts from 'native-echarts';
import produce from 'immer';
import SelectRepertory from '../../../../components/selecRepertory';
import { FormButtonRadio } from '../../../../components';
import Theme from '../../../../native-base-theme/variables/commonColor';
import { UtilToast } from '../../../../utils/util-method';

class SparePartsInventory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { value: 100, name: '安全库存' },
        { value: 50, name: '小于安全库存' },
        { value: 10, name: '小于最安全库存' },
      ],
      showSelectIncidentPart: false,
      location: '',
      category: [
        { name: '全部', checked: true, value: '01' },
        { name: 'A类', checked: false, value: '02' },
        { name: 'B类', checked: false, value: '03' },
        { name: 'C类', checked: false, value: '04' },
      ],
    };
  }

  change = () => {
    this.setState({
      data: [
        { value: 100, name: '安全库存1' },
        { value: 50, name: '小于安全库存1' },
        { value: 10, name: '小于最安全库存1' },
      ],
    });
  }

  // 跳转到备件库存查询展示页面
  toInfo = () => {
    global.navigation.navigate({
      routeName: 'SparePartsInventoryInfo',
      params: {
        datas: this.props.datas,
        category: this.state.category,
      },
    });
    // const params = {
    //   fromNavigation: true,
    //   id: item.failureId,
    //   code: item.failureCode,
    // };
    // alert(JSON.stringify(params));
    // global.navigation.navigate({ routeName: 'Info', params });
  }

  _hideSelect = () => {
    this.setState({
      showSelectIncidentPart: false,
    });
  }

  _selectLocation = () => {
    if (this.props.datas && this.props.datas.equipmentId && this.props.datas.objType) {
      this.setState({
        showSelectIncidentPart: true,
      });
    } else {
      DeviceEventEmitter.emit('showLoading', false);
      UtilToast('没有设备信息', 'danger');
    }
  }

  _finishSelectPart = async (selectedRepertory) => { // 仓库选择结束
    this.setState({ location: selectedRepertory });
  }

  category = (v) => {
    const category = this.state.category.map(it => ({
      ...it,
      checked: it.name === v.name,
    }));

    this.setState(produce(draft => {
      draft.category = category;
    }));
  }

  render() {
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
      },
      color: ['#207aff', '#D69D1C', 'red'],
      series: [
        {
          type: 'pie',
          radius: '55%',
          center: ['50%', '40%'],
          data: this.state.data,
          itemStyle: {
            normal: {
              label: {
                position: 'inner',
                textStyle: {
                  align: 'center',
                  baseline: 'middle',
                },
                formatter: '{b}:\n{c}\n({d}%)',
              },
              lableLine: {
                show: false,
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    return (
      <View style={styles.tabContent}>
        {this.state.showSelectIncidentPart && (
          <SelectRepertory
            show={this.state.showSelectIncidentPart}
            hide={this._hideSelect}
            equTypeId={this.props.datas.objType}
            equipmentId={this.props.datas.equipmentId}
            finish={this._finishSelectPart}
          />
        )}
        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
          <Text style={{ color: 'white', fontSize: 17 }}>仓库选择</Text>
          <Text style={styles._button} onPress={() => this._selectLocation()}>选择</Text>
        </View>
        <View>
          <Text style={{ color: 'white', paddingTop: 8, paddingBottom: 8, paddingLeft: 8, fontSize: 15 }}>{this.state.location}</Text>
        </View>
        <FormButtonRadio datas={this.state.category} _click={this.category} />
        <TouchableWithoutFeedback onPress={() => this.toInfo()}>
          <View>
            <Text style={[styles.textDescription, { marginTop: 20 }]}>备件种类：45类</Text>
            <Text style={styles.textDescription}>库存总数：6583件</Text>
            <Text style={styles.textDescription}>总价值：123.89万元</Text>
            <Echarts option={option} height={300} />
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  tabContent: {
    backgroundColor: Theme.myPrimary,
    width: '100%',
    height: '100%',
    padding: 8,
  },
  textDescription: {
    color: '#ffffff',
    margin: 8,
  },
  _button: {
    width: 48,
    borderRadius: 2,
    textAlignVertical: 'center',
    padding: 4,
    color: 'white',
    textAlign: 'center',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'white',
  },
});
export default SparePartsInventory;
